<template>
  <div class="loins-calendar">
    <div class="loins-calendar-tabbar">
      <div class="loins-calendar-title">
        <div>
          <span class="month">{{monthNumber}}</span>
          <span style="margin-right: 20px; position: relative; top: -2px;">预计产出：0.52</span>
        </div>
        <div style="margin-left: 55px;">
          <span>实际产出：0.52</span>
        </div>
      </div>
    </div>
    <div style="padding: 12px;">
      <div class="title-c">日</div>
      <div class="title-c">一</div>
      <div class="title-c">二</div>
      <div class="title-c">三</div>
      <div class="title-c">四</div>
      <div class="title-c">五</div>
      <div class="title-c">六</div>
      <div class="day-content"  v-for="item in renderArr" >
        <div class="day-c" v-for="day in item">
          <div class="day" style="color: rgb(38, 42, 47); cursor: pointer;" v-if="day!=' '">{{day}}</div>
          <div class="day" style="color: rgb(38, 42, 47);" v-else> </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { toRefs, defineProps } from 'vue'
  interface Props {
    yearNumber?: number,
    monthNumber?:number,
  }

  const props = defineProps<Props>()
  const {yearNumber,monthNumber} = props
  // console.log('yearNumber',yearNumber);
  let yearParam = ~~yearNumber || 2023;
  /* let yearNumber = 2023;
  let monthNumber = 1; */
  let lastDayArr = [31,(yearParam%4 == 0 ? 29 : 28 ),31,30,31,30,31,31,30,31,30,31];
  let weekName = new Date(`${yearParam}/${monthNumber}/1`).getDay();
  let renderArr = [[],[],[],[],[],[],[]];
  let overFlag = 0; // 是否装满了的下标
  for(let dayBeagin = (0 - weekName) ; dayBeagin<lastDayArr[monthNumber-1]; dayBeagin++ ) {
    if(dayBeagin<0) {
      renderArr[0].push(' ')
    }else{
      if(renderArr[overFlag].length == 7 ) {
        renderArr[overFlag+1].push(dayBeagin+1)
        if(renderArr[overFlag+1].length == 7)overFlag = overFlag +1;
      }else{
        renderArr[overFlag].push(dayBeagin+1)
      }
    }
  }
  // console.log(renderArr);
</script>
<style scoped lang="scss">
  .loins-calendar {
    float: left;
    width: 24%;
    margin-left:0.5%;
    margin-right:0.5%;
    height: 315px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 3px
  }

  .loins-calendar-tabbar {
    padding: 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #ebebeb
  }

  .loins-calendar-title {
    color: #666;
    font-size: 12px;
    font-family: "PingFang SC";
    line-height: 17px
  }

  .loins-calendar-title .month {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 23px;
    margin-left: 8px;
    color: #262a2f;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    background: rgba(92, 190, 241, .3);
    border-radius: 50%
  }

  .loins-calendar .title-c {
    display: inline-block;
    width: 14.28571%;
    color: #9c9c9c;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center
  }

  .loins-calendar .day-content {
    text-align: left;
  }

  .loins-calendar .day-content .day-c {
    display: inline-block;
    width: 14.28571%;
    margin-top: 12px;
    text-align: center
  }

  .loins-calendar .day-content .day-c .day {
    width: 24px;
    height: 24px;
    margin: 0 auto;
    color: #262a2f;
    font-weight: 400;
    font-size: 14px
  }

  .loins-calendar .day-content .day-c .desc {
    height: 28px;
    color: #202020;
    font-weight: 400;
    font-size: 20px;
    text-align: center
  }

</style>